<template>
    <div class="home">
        <div style="width: 620px; height: 350px;">
            <ImgEdit
                ref="imgEditComponents"
            ></ImgEdit>
            
        </div>
        <div style="color: red;">点选按钮后，在画布长按拖动添加元素。</div>
        <div class="content">
            <h3>说明：</h3>
            <p>其他功能已完成，主要参照示例视频，实现<label>添加批注</label>功能</p>
            <p>当前技术栈:<label>vue2.6</label>,图片编辑插件:<label><a target="_blank" href="https://www.leaferjs.com/ui/guide/">leafer.js</a></label></p>
            <p>开发环境node版本号:<label>18.17.0</label></p>
            <h3>示例视频</h3>
        </div>
        <div>
            <iframe width="700" height="400" src="//player.bilibili.com/player.html?isOutside=true&aid=113736673206041&bvid=BV1N96hYzE21&cid=27597737757&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
        </div>
    </div>
</template>

<script>
import ImgEdit from '@/components/ImgEdit.vue';
    export default {
        components: {
            ImgEdit,
        },
    }
</script>

<style lang="scss" scoped>
.home {
    width: 1000px;
    margin: 0 auto;
}
.content label{
    color: red;
    display: inline-block;
    a {
        color: #409eff;
    }
}

</style>